<template>
  <div class="f-selected-wrap selectedWrap">
    <span>已选条件:</span>
    <div class="tags-wrap">
      <a-space size="small" align="center" class="space-wrap">
        <Draggable v-model="list">
          <a-tag
            v-for="tag in selectedTagList"
            :key="tag.key"
            closable
            @close="e => selectedClose(e, tag)"
          >
            {{ tag.name }}
          </a-tag>
        </Draggable>
      </a-space>
    </div>
    <!-- <span>
      <a>收起</a>
    </span> -->
  </div>
</template>

<script>
import Draggable from 'vuedraggable'

export default {
  props: {
    selectedTagList: {
      // 当前选中的tag
      type: Array,
      default: () => []
    }
  },
  components: {
    Draggable
  },
  data() {
    return {
      selectedTags: [] // 已选标签
    }
  },
  computed: {
    list: {
      get() {
        return this.selectedTagList
      },
      set(value) {
        this.$emit('update-sort-tag', value)
      }
    }
  },
  methods: {
    selectedClose(e, item) {
      // 移除标签
      this.$emit('close-tag', { e, ...item })
    }
  }
}
</script>

<style scoped lang="scss"></style>
